<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
</head>
<!-- image object map area iframe embed audio video source track canvas -->

<body>
    Here is a common form for representing the three activities in a triathlon.
    <p>
        <!-- 单位是像素(px)-->
        <!--  ismap 服务器端分区响应图，图像点击的位置会附加到URL上
           例： /otherpage.html?35,35
        -->
        <p>服务器端分区响应图:</p>
        <a href="otherpage.html">
            <img src="./triathlon.png" ismap alt="Triathlon Image" width="200" height="67">
        </a>
        <!-- map 包含area  area 各自代表图像上可被点击的一块区域 
            area 两类属性 一类定url相关 一类定可以点击的区域
        -->
        <p>客户端分区响应图:</p>
            <img src="./triathlon.png" usemap="#mymap" alt="Triathlon Image" width="200" height="67">
        <map name="mymap">
            <!-- coords是以图像左上为基准的坐标，并不是以整个浏览器左上为基准 -->
            <area shape="rect" coords="3,5,68,62" href="./swimpage.html" alt="swimming">
            <area shape="rect" coords="70,5,130,62" href="./cyclepage.html" alt="Running">
            <area shape="default" href="./otherpage.html" alt="otherpage">
        </map>
    </p>
    The first icon represents swimming, the second represents cycling and the third
    represents running.
    <!-- iframe元素 文档中嵌入另一个文档 -->
    <h1>Things I like</h1>
    <nav>
        <ul>
            <li>
                <a href="./swimpage.html" target="myframe">Fruits I Like</a>
            </li>
            <li>
                <a href="./cyclepage.html" target="myframe">Activities I Like</a>
            </li>
        </ul>
    </nav>
    <!-- sanbox 可禁用一些元素，填入值可以启用元素 -->
    <iframe name="myframe" width="300" height="100" ></iframe>
    <!-- object/embed元素通常用于插件，但是他们也可以用来嵌入浏览器能直接处理的内容，比如图像,视频 -->
    <!-- <embed src="" type="" width="" height="" alllowfullscreen="true"> -->
    <!-- 二者等同 -->
    <!-- <object data="" type="" width="" height="">
        <param name="alllowfullscreen" value="true">
        <b>Sorry!</b>
    </object> -->
    <!-- object的其他用途 -->
    <!-- 嵌入图像 -->
    <p>
        <!-- chorme暂不支持object分区响应图 -->
        <map name="myobjectmap">
            <!-- coords是以图像左上为基准的坐标，并不是以整个浏览器左上为基准 -->
            <area shape="rect" coords="3,5,68,62" href="./swimpage.html" alt="swimming">
            <area shape="rect" coords="70,5,130,62" href="./cyclepage.html" alt="Running">
            <area shape="default" href="./otherpage.html" alt="otherpage">
        </map>
        <object data="./triathlon.png" type="image/png" usemap="myobjectmap" width="200" height="67"></object>
    </p>
    <!-- 失效 -->
    <!-- <object type="text/html" name="myframe" width="300" height="100"></object> -->

    <!-- progress元素 显示进度 -->
    <!-- meter元素 某个范围内所有可能值中的一个 -->
    <progress id="myprogress" value="10" max="100"></progress>
    <meter id="mymeter" value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>
    <p>
        <button type="button" value="30">30%</button>
        <button type="button" value="60">60%</button>
        <button type="button" value="90">90%</button>
    </p>
    <script>
        var buttons = document.getElementsByTagName('BUTTON');
        // process
        // var progress = document.getElementById('myprogress');
        // for (var i = 0; i < buttons.length; i++) {
        //     buttons[i].onclick = function(e){
        //         progress.value = e.target.value;
        //     };
        // }
        // meter
        var meter = document.getElementById('mymeter');
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].onclick = function(e){
                meter.value = e.target.value;
            };
        }
    </script>

    <!-- 其他嵌入元素 
        音频/视频 (audio,video,source,track) 34章
        图形 (canvas) 35,36章
        -->
</body>

</html>